<template>
	<scroll-view scroll-y class="scrollPage">


		<view class="UCenter-bg " :style="'background-image: url('+headimg+');background-size: cover; '">

			<view class="light line-blue text-bold" @click="goBack"> <text class="cuIcon-back"></text> 返回</view>
			<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-wave"></image>
		</view>
		<view class="padding flex text-center text-grey bg-white ">
			<view class="flex flex-sub flex-direction solid-right">
				<view class="text-xxl text-blue"> <text class="cuIcon-vip text-blue"></text>{{topicTitle}}</view>
			</view>

			<!-- <view class="action cu-btn round  line-green padding margin-sm" @click="upToweek">
				<text class="cuIcon-pullup text-lg"></text>
				<text class="text-lg text-bold">上传</text>
			</view> -->
		</view>


		<view class="cu-card dynamic margin-top-sm margin-bottom-sm" v-for="(one,index) in topicList" :key="index">
			<view class="cu-item shadow " @click="toDetail(one.id)" >
					
						<view class="margin-sm">
							<view class="">
								<view class="huati text-green text-bold" style="width:100px">{{one.title}}</view>
							</view>
							<view class="text-right">
								<view class="huati text-orange text-bold">#{{topicTitle}}#</view>
							</view>
							<view class="grid ">
								<view class="round cu-tag bg-blue light">{{one.username}}</view>
								<view class="padding-sm">
									<text class="cuIcon-like line-red text-bold"></text>
								</view>
								<view class="">
									<view class="round cu-tag bg-pink light text-cut">{{one.sendto}}</view>
								</view>
							</view>
						</view>
				
					<!-- <view class="padding" > -->
					<!-- <textarea class="textforcut text-content"  disabled v-model="one.saycontent"></textarea> -->
					<!-- <text class=" textforcut text-content">
						{{one.content}}
					</text>
					 -->
					
				<!-- </view> -->



			<!-- 	<view class="grid col-1 flex-sub padding-lr">
					<view v-for="(img,index) in (one.images|imagesToArray) " :key ='index'>
					<image  mode="widthFix" class="response" :src="img"></image>
					</view>
				</view> -->
				<view class="margin-sm" >
					
					<text class=" textforcut text-content">
						{{one.content}}
					</text>
					
					
				
					<view class="flex justify-end margin-top ">
						<view class="right">
							<view class="cu-tag round bg-green sm">{{one.school}}</view>
						</view>
						<view class="right">
							<view class="round cu-tag bg-yellow sm">{{one.classname}}</view>
						</view>				
					</view>
					<view class="flex justify-end">
					  <text class="right cuIcon-link">浏览:{{one.views}}</text>
					  <text class="right cuIcon-new">评论:{{one.comments}}</text>
					  <view class="right text-blue">{{one.create_date}}</view>
					</view>
					
					 
						<view class="text-right">
								<view class="text-gray text-sm">{{one.createtime|timeFormat}}</view>
						</view>
				</view>
			</view>
		</view>


     <view class="btn-plusempty" hover-class="bottom-btn-hover" @click="upToweek">
			<image src="../../../static/jiahao.png" class="plusempty-img"></image>
	</view>



		<view class="" v-if="topicList.length <= 0">
			<view class="padding-xl ErrorNetwork text-center">
				<image src="../../../static/NotAvailable.png" mode="widthFix" style='width:60%' />
				<view class="text-bold text-gray" style="letter-spacing:6rpx;line-height:50rpx;font-size:26rpx">
					暂无信息哟
				</view>
			</view>

		</view>

		<view class="text-center" v-else-if="num < count">
			<view class="action cu-btn round line-blue padding margin-sm" @click="getMoreList">
				<text class="cuIcon-discover"></text>
				<text class="text-lg">加载更多</text>
			</view>
		</view>


		<view class="text-center" v-else="">
			<view class="action  round line-blue padding margin-sm">
				<text class="cuIcon-flashlightopen"></text>
				<text class="text-sm">没有更多数据了哟</text>
			</view>
		</view>


	</scroll-view>
</template>

<script>
	var _self, num = 10;
	export default {
		data() {
			return {
				topicList: [],
				count: '',
				num: 10,
				channel: '',
				headimg:'',
				topicTitle:''
			}
		},

		// 注册组件
		components: {},
		onLoad(option) {
			this.channel = option.channel;
			console.log(this.channel);
			_self = this;
			_self.getHeadimg();
			this.getList();
		},
		methods: {
			
			getHeadimg(){
				this.$http.get('addons/cms/api/channelByID?channel_id=' + _self.channel)
					.then(res => {
						console.log(res);
						_self.headimg = res.data.data.image;
						_self.topicTitle = res.data.data.name;
						
					})
					.catch(err => {});
			},
			
			toDetail(archivesid){
				uni.navigateTo({
					url: './detal?channel='+_self.channel+'&id='+archivesid
				});
			},
			goBack() {
				uni.navigateBack({
					delta: 1,
					animationType: 'pop-out',
					animationDuration: 200
				});
			},
			upToweek() {
				uni.navigateTo({
					url: './send?channel='+this.channel
				});
			},
			getMoreList() {
				this.num += 10;

				if (this.num > _self.count) {
					this.num = _self.count;
				}
				this.$http.get('api/WeekendTopic/getOneWeekList/num/' + num)
					.then(res => {
						_self.weekList = res.data.data;
						_self.count = res.data.msg;
					})
					.catch(err => {});
			},

			getList() {
				this.$http.get('addons/cms/wxapp.archives/index?channel=' + _self.channel)
					.then(res => {
						_self.topicList = res.data.data;
						_self.count = res.data.msg;
						console.log(res);
					})
					.catch(err => {});
			}

		},
		filters: {

			timeFormat: function(arg, type = 'YYYY-MM-DD h:m:s') {

				if (arg.toString().length == 10) {
					arg = arg * 1000;
					//如果date为13位不需要乘1000
					//[js时间戳长度是13位]，php，java等时间戳长度为10位
				}
				var date = new Date(arg)
				var year = date.getFullYear(); //获取年
				var mouth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1); //月
				var day = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()); //日
				var hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()); //时
				var minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()); //分
				var second = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()); //秒
				if (type == 'YYYY-MM-DD h:m:s') {
					return year + '-' + mouth + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				}

			},
			imagesToArray: function(images) {
			   var strs= new Array(); //定义一数组 
				if (images.length == 1) {
					strs[0] = images;
					return strs;
					//如果date为13位不需要乘1000
					//[js时间戳长度是13位]，php，java等时间戳长度为10位
				}else{
					strs=images.split(","); //字符分割 
					return strs;
				}
				
				
			}

		},
	};
</script>





<style>
	.btn-plusempty{
		width: 110upx;
		height: 110upx;
		background: #007bfa;
		position: fixed;
		bottom: 50upx;
		right: 20upx;
		border-radius: 100%;
		overflow: hidden;
		text-align: center;
		line-height: 110upx;
	}
	.plusempty-img{
		width: 50upx;
		height: 50upx;
		margin-top: 30upx;
	}
	.bottom-btn-hover{
		background: #0564c7!important;;
	}
	.cu-tag.sm {
		font-size: 20rpx;
		padding: 0rpx 12rpx;
		height: 32rpx;
	}

	.right {
		margin-left: 20upx;
	}

	.henflex {
		display: flex;
		flex-flow: row;
		padding: 15upx;
	}

	.UCenter-bg {
		height: 550rpx;
		display: flex;
		/* justify-content: center; */
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: start;
		color: #39B54A;
		font-weight: 300;
		/* text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); */
	}

	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}
	
	.textforcut
    { 
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
	}
</style>
